<template>
  <div class="bigbox">
    <div class="head">
      <h1>列表页</h1>
    </div>

    <div class="gdp">
      <el-input
        v-model="data.keyword"
        style="width: 240px"
        placeholder="请输入搜索内容"
        :prefix-icon="Search"
      />
      <el-button style="margin-left: 14px" type="success" @click="searchU()">搜 索</el-button>
      <el-button type="primary" @click="addW()">添 加</el-button>
    </div>

    <div class="content">
      <el-table :data="data.users" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="uname" label="姓名" width="180" />
        <el-table-column prop="uage" label="年龄" width="180" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button @click="editW(scope.row.id)" type="primary" :icon="Edit" circle></el-button>
            <el-button @click="delU(scope.row.id)" type="danger" :icon="Delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
    v-model="isShow"
    title="添加或修改用户"
    width="500"
    align-center
  >
  <el-form :model="data.formUser" label-width="auto" style="max-width: 600px">
    <el-form-item label="姓名">
      <el-input style="width: 200px;" v-model="data.formUser.uname" />
    </el-form-item>
    <el-form-item label="年龄">
      <el-input style="width: 200px;" v-model="data.formUser.uage" />
    </el-form-item>
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="saveU">保存</el-button>
        <el-button type="primary" @click="cancelU">取消</el-button>
      </div>
    </template>
  </el-dialog>

  </div>

  
</template>

<script setup>
import { reactive,ref } from 'vue'
import axios from 'axios'
import { Delete, Edit, Search } from '@element-plus/icons-vue'

const api = 'http://localhost:3000'

let data = reactive({
  users: [],
  keyword: '',
  formUser:{}
})

let isShow = ref(false)

function editW(id) {
  isShow.value = true
  axios.get(`${api}/user/${id}`).then(res=>{
    data.formUser = res.data.data
  })
}

function saveU(){
  isShow.value = false
  data.formUser.id ? updateU(data.formUser.id) : addU()
  data.formUser = {}
}

function addU(){
  axios.post(`${api}/user`,data.formUser).then(()=>{
    queryAllUsers()
  })
}

function updateU(){
  axios.put(`${api}/user/${data.formUser.id}`,data.formUser).then(()=>{
    queryAllUsers()
  })
}

function cancelU(){
  isShow.value = false
  data.formUser = {}
}

function delU(id) {
  axios.delete(`${api}/user/${id}`).then(() => {
    queryAllUsers()
  })
}

function addW() {
  isShow.value = true
}

function queryAllUsers() {
  console.log(data.keyword)
  axios.get(`${api}/users?keyword=${data.keyword}`).then((res) => {
    data.users = res.data.data
    console.log(data.users)
  })
}

function searchU() {
  queryAllUsers()
}

queryAllUsers()
</script>

<style scoped>
table,
tr,
td,
th {
  border: 1px solid;
  border-collapse: collapse;
}

.head {
  display: flex;
  justify-items: center;
  align-content: center;
  justify-content: center;
  margin-top: 170px;
}

.gdp {
  padding-top: 30px;
}

.content {
  padding-top: 30px;
  display: flex;
  justify-items: center;
  align-content: center;
  align-items: center;
}

.bigbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: beige;
}
</style>
